<!--
 * 计划协同联动-门户
 * @author: zhangyebo
 * @since: 2025-04-21
 * index.vue
-->
<template>
  <div class="listView-wrap app-container">
    <el-scrollbar>
      <el-row :gutter="3">
        <el-col :span="8">
          <portalCount />
        </el-col>
        <el-col :span="10">
          <systemList />
        </el-col>
        <el-col :span="6">
          <userInfo />
        </el-col>
      </el-row>

      <div class="flow-box">
        <graph />
      </div>
      <div class="bottom-box">
        <el-card>
          <div class="left">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="date" label="标题" width="180" />
              <el-table-column prop="name" label="截止时间" width="180" />
              <el-table-column prop="address" label="操作" />
            </el-table>
          </div>
        </el-card>
        <el-card>
          <div class="right">协同事项日历</div>
        </el-card>
      </div>
    </el-scrollbar>
  </div>
</template>
<script setup>
import portalCount from './components/portalCount.vue'
import systemList from './components/systemList.vue'
import userInfo from './components/userInfo.vue'
import graph from './components/graph.vue'
import { ref } from 'vue'

const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
</script>
<style lang="scss" scoped>
.flow-box {
  margin-top: 10px;
  padding: 20px;
}
.bottom-box {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  height: 400px;
  gap: 10px;

  .left {
    width: 100%;
    height: 100%;
  }

  .right {
    width: 100%;
    height: 100%;
  }
}
</style>
